<template>
  <el-dialog
    v-model="show"
    :width="width"
    :show-close="false"
    class="cover-dialog"
  >
    <div class="dia-header flex_aic_jcsb">
      <span class="fs-14 color-white">{{ title }}</span>
      <el-icon class="cursor-pointer" color="white" @click="handleClose"
        ><Close
      /></el-icon>
    </div>
    <div class="p24">
      <slot></slot>
    </div>
    <div class="dia-footer flex justify-end" v-if="!hideFooter">
      <el-button @click="handleClose">{{ $t('dialog.取消') }}</el-button>
      <el-button type="primary" @click="handleConfirm" :loading="confirmLoading">{{ $t('dialog.确定') }}</el-button>
    </div>
    <slot name="footer"></slot>
  </el-dialog>
</template>

<script setup>
import { ref } from "vue";
import { Close } from "@element-plus/icons-vue";

const emit = defineEmits(["confirm"]);
const show = defineModel();
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  width: {
    type: String,
    default: "30%",
  },
  showFooter: {
    type: Boolean,
    default: true,
  },
  hideFooter: {
    type: Boolean,
    default: false,
  },
  confirmLoading: {
    type: Boolean,
    default: false,
  },
});

const handleClose = () => {
  show.value = false;
  emit("close");
};

const handleConfirm = () => {
  emit("confirm");
};
</script>

<style lang="scss">
.cover-dialog {
  padding: 0;
  .el-dialog__header {
    display: none;
  }
  .dia-header {
    background-color: var(--primary-color);
    padding: 12px 24px;
  }

  .dia-footer {
    padding: 12px 24px;
    border-top: 1px solid #f0f0f0;
  }
}
</style>
